<template>
  <div>
    <div class="absolute z-[999] right-20 bottom-70 text-lg flex gap-4 items-center">
      <span>隐藏所有数据</span>
      <el-switch v-model="isShowData" size="large" />
    </div>
    <div v-show="isShowData">
      <!-- <div class="w-[160px] absolute z-50 top-[430px] left-[330px] cflex">
        <img :src="Box" class="w-full h-full" />
        <span class="absolute text-[12px] bottom-4">传动侧火情F7：正常</span>
      </div> -->

      <div class="w-[230px] h-[48px] absolute z-50 top-[580px] left-[70px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{
              vf('/1880/FMC/ITG/PY/FMD/StripTemp_1_Act')
            }}</span>
            <span>带钢温度A</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{
              vf('/1880/FMC/ITG/PY/FMD/StripTemp_2_Act')
            }}</span>
            <span>带钢温度B</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/ITG/PG/StripWedge40_Act') }}</span>
            <span>带钢楔形</span>
          </div>
        </div>
      </div>

      <div class="w-[220px] h-[48px] absolute z-50 top-[640px] left-[70px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/ITG/PG/StripCrown40_Act') }}</span>
            <span>带钢凸度偏差</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/L2/ACT/F7D/Thick') }}</span>
            <span>厚度</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/L2/ACT/F7D/Width') }}</span>
            <span>宽度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[320px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F7/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F7/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F7/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[530px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F6/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F6/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F6/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[740px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F5/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F5/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F5/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[940px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F4/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F4/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F4/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[1150px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F3/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F3/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F3/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[1390px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F2/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F2/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F2/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="w-[180px] h-[48px] absolute z-50 top-[670px] left-[1630px] cflex text-[12px]">
        <img :src="Box2" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F1/MOTOR/Cur_Act') }}</span>
            <span class="">电流</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F1/SDS/LCRF_Total_Fbk') }}</span>
            <span>轧制力</span>
          </div>
          <img :src="Line" class="w-[1px]" />
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/F1/SSF/RollSpeed_Fbk') }}</span>
            <span>轧辊速度</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[670px] left-[1980px] cflex text-[12px]">
        <img :src="Box3" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/ITG/PY/CS/StripTemp_N001') }}</span>
            <span>带钢温度1</span>
          </div>
        </div>
      </div>

      <div class="h-[60px] absolute z-50 top-[670px] left-[2250px] cflex text-[12px]">
        <img :src="Box3" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FMC/ITG/PY/CS/StripTemp_N002') }}</span>
            <span>带钢温度2</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Box from '@/assets/imgs/box.png'
import Box2 from '@/assets/imgs/Box_param.png'
import Box3 from '@/assets/imgs/box_temp.png'
import Line from '@/assets/imgs/line.png'
import { getL1Data } from '@/api/api'
import { ref, onMounted, onUnmounted, watch } from 'vue'

const isShowData = ref(true)

const dataMap = ref({})

const fetchData = async () => {
  try {
    const res = await getL1Data()
    const map = {}
    if (res && Array.isArray(res.data)) {
      for (const item of res.data) {
        map[item.asset_alias] = item.value
      }
    }
    dataMap.value = map
  } catch (e) {
    console.error('getL1Data error:', e)
  }
}

let timer = null
onMounted(() => {
  fetchData()
  timer = setInterval(fetchData, 10000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})

const vRaw = (alias) => dataMap.value[alias]

const formatNumber = (v) => {
  if (v === null || v === undefined) return '--'
  const n = Number(v)
  if (!Number.isFinite(n)) return '--'
  return Number.isInteger(n) ? String(n) : n.toFixed(1)
}

const vf = (alias) => {
  let val = vRaw(alias)

  // 轧辊速度点位需要 /1000
  if (alias.includes('RollSpeed_Fbk')) {
    if (val === null || val === undefined) return '--'
    const n = Number(val) / 1000
    return Number.isFinite(n) ? n.toFixed(1) : '--'
  }
  // 轧制力点位需要 /10,保留两位
  if (alias.includes('LCRF_Total_Fbk')) {
    if (val === null || val === undefined) return '--'
    const n = Number(val) / 10
    return Number.isFinite(n) ? n.toFixed(2) : '--'
  }

  return formatNumber(val)
}
</script>

<style lang="scss" scoped>
.gradient-text {
  background: linear-gradient(to bottom, #dce0ff, #06fcff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 兼容 Firefox */
  background-clip: text;
  color: transparent;
}
</style>
